<template>
	<view @click="clickCard" class="bill_card_box" v-if="lotData?.id">
		<view class="icon">
			<Avatar :fileName="lotData.user.user_avatar" size="60rpx" />
		</view>
		<view class="content_bill_card">
			<view class="header_bill_card">
				<view class="lot_name text_ellipsis">
					{{lotData.title}}
				</view>
				<view class="footer">
					<view class="time">
						{{lotData.createAt}}
					</view>
				</view>
			</view>
			<view class="lot_state">
				<view class="state_item">
					<MyTag fontSize="25rpx" :borderBgc="changeColor(lotData.state)" :color="changeColor(lotData.state)">
						<template #info>
							{{lotData.state===LotState.GOING ? '进行中' : '已结束'}}
						</template>
					</MyTag>
				</view>
				<view class="state_item" v-if="isSelf" @click.stop="isDeleteLotFun">
					<MyTag fontSize="25rpx" :borderBgc="changeColor(lotData.state)" :color="changeColor(lotData.state)">
						<template #info>
							删除
						</template>
					</MyTag>
				</view>
			</view>
		</view>
	</view>
	<AdBanner :itemIndex="itemIndex"/>
</template>

<script setup>
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'

	import {
		deleteStrByPatten,
	} from '@/utils/changeData.js'
	
	import AdBanner from '@/components/AdBanner/AdBanner.vue'

	import {
		LotState
	} from '@/enum/GlobalEnum.js'

	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'

	import MyTag from '@/components/MyTag/MyTag.vue'

	const dynamicStyle_store = dynamicStyleStore()

	const {
		primary_text_color,
		shallow_text_color,
		primary_text_hot_color,
		primary_light_color,
		primary_hot_color
	} = dynamicStyle_store.dormitoryStyle

	const props = defineProps({
		lotData: {
			type: Object
		},
		isSelf:{
			type:Boolean,
			default:false
		},
		pageType:{
			type:String
		},
		itemIndex:{
			type:Number
		}
	})
	const emits=defineEmits(['chooseDeleteLotEmit'])

	const changeColor = (state) => {
		return state === LotState.GOING ? primary_hot_color : primary_light_color
	}

	const clickCard = () => {
		switch(props.pageType){
			case 'lot':
				uni.navigateTo({
					url: `/pages/Dormitory/LotInfo/LotInfo?lot_id=${props.lotData.id}`
				})
				break
			case 'randomLots':
				uni.navigateTo({
					url:`/pages/Dormitory/RandomJoinRecord/RandomJoinRecord?id=${props.lotData.id}`
				})
				break
			case 'votes':
				uni.navigateTo({
					url:`/pages/Dormitory/VoteInfo/VoteInfo?id=${props.lotData.id}`
				})
				break
		}
	}
	
	const isDeleteLotFun=()=>{
		emits('chooseDeleteLotEmit',props.lotData)
	}
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.bill_card_box {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		color: v-bind(primary_text_color);
		.icon {
			display: flex;
			align-items: center;
			margin-right: 10rpx;
		}
		.content_bill_card {
			display: flex;
			align-items: center;
			width: calc(94vw);
			.header_bill_card {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				width: calc(52vw);
				.lot_name{
					width: calc(52vw);
					font-size: 30rpx;
				}
				.footer {
					display: flex;
					font-size: 25rpx;
					color: v-bind(shallow_text_color);
					letter-spacing: 2rpx;
				}
			}

			.lot_state {
				width: calc(28vw);
				display: flex;
				justify-content: flex-end;
				.state_item{
					padding-left: 10rpx;
				}
			}
		}
	}
</style>
